<template>
  <NavigationBar>
    <Row :gutter="16">
      <i-col span="6" style="text-align: center">
        <Affix :offset-top="50">
          <Card dis-hover :bordered="false">
            <!--个人信息-->
            <PersonalInfo class="animate__animated animate__rotateIn"/>
            <!--个人信息-->
            <!--博客统计-->
            <Statistic class="animate__animated animate__rubberBand"/>
            <!--博客统计-->
          </Card>
        </Affix>
      </i-col>

      <i-col span="12">
        <!--文章详细-->
        <Card class="animate__animated animate__flipInX">
          <!--标题-->
          <div id="title">
            {{this.articleInfo.title}}
          </div>
          <!--标题-->
          <!--信息-->
          <Card dis-hover style="margin-top: 15px">
            <div id="info">
              <Icon type="ios-thumbs-up-outline" />
              {{hits}}
              <Icon type="ios-chatboxes-outline" />
              {{commentAmount}}
              <br/><br/>
              分类：
              <Tag :color="$store.state.color[(Math.floor((Math.random()*10)+1))%7]">{{this.articleInfo.categories}}</Tag>
              标签：
              <Tag v-for="tag in this.articleInfo.tags" :key="tag.id" :color="$store.state.color[(Math.floor((Math.random()*10)+1))%7]">{{tag.name}}</Tag>
              <br/><br/>
              发布时间：{{this.articleInfo.gmtCreate | formatTime}}
              <br/>
              更新时间：{{this.articleInfo.gmtModified | formatTime}}
            </div>
          </Card>
          <!--信息-->
          <!--文章主要内容-->
          <div style="margin-top: 30px" id="main" class="markdown-body" v-highlight v-html="this.articleInfo.contentHtml">
          </div>
          <!--文章主要内容-->
          <!--评论-->
          <Comment :allowComment="articleInfo.allowComment" :articleId="articleId"/>
          <!--评论-->
        </Card>
      </i-col>
      <i-col span="6" style="text-align: center">
        <Affix :offset-top="50">
          <Card class="animate__animated animate__fadeInUpBig" dis-hover :bordered="false" :allowDelete="true">
            <!--同分类的文章-->
            <List header="分类中的文章" border>
              <ListItem v-for="(item, index) in articleList" :key="index">
                <div @click="getArticleById(item.id)" class="category-article">{{item.title}}</div>
              </ListItem>
            </List>
            <!--同分类的文章-->
            <!--全部的分类-->
            <Card style="margin-top: 40px" title="全部分类">
              <CellGroup >
                <div @click="listArticleByCategoryId(item.id)" v-for="(item, index) in categoryList" :key="index" >
                  <Cell :title="item.name">
                    <Badge :count="item.articleAmount" slot="extra" />
                  </Cell>
                </div>

              </CellGroup>
            </Card>

            <!--全部的分类-->
          </Card>
        </Affix>
      </i-col>
    </Row>
  </NavigationBar>
</template>

<script>
  import NavigationBar from "@/components/common/NavigationBar";
  import PersonalInfo from "@/components/common/PersonalInfo";
  import Statistic from "@/components/common/Statistic";
  import {getArticleById, listArticleByCategoryId} from "@/network/articleDetail";
  import 'github-markdown-css/github-markdown.css'
  import {allCategories} from "@/network/write";
  import Comment from "@/components/common/Comment";
  import moment from "moment";

  export default {
    name: "ArticleDetail",
    data() {
      return {
        //评论显示10条父评论
        pageNo: 1,
        pageSize: 10,
        total: 0,
        articleId: 0,
        //获取的文章信息
        articleInfo: {},
        //全部分类
        categoryList: [],
        //分类中的文章
        articleList: [],
        //文章点击数
        hits: 0,
        //文章评论数
        commentAmount: 0,
        //评论
        comment: '',
        //是否可以评论
        isEdit: false,
        //输入框中显示的提示文字
        placeholder: '请输入评论内容。。。',
        //是否聚焦
        isFocus: false,
        //父评论Id
        parentCommentId: 0,
        commentVoList: []
      }
    },
    components: {
      NavigationBar,
      PersonalInfo,
      Statistic,
      Comment
    },
    mounted() {
      //获取vueX中保存的id
      this.articleId = this.$store.state.articleDetailId;
      //获取文章信息
      this.getArticleById(this.articleId);
      //获取全部的分类
      this.allCategories();
    },
    methods: {
      //获取指定文章信息
      getArticleById(articleId) {
        getArticleById(articleId).then(res => {
          if (res.code === 2000) {
            this.articleInfo = res.data.article;
            this.hits = res.data.hits;
            this.commentAmount = res.data.commentAmount;
            this.listArticleByCategoryId(this.articleInfo.categoryId);
          } else {
            this.$Message.error({
              background: true,
              content: '获取文章失败！'
            })
          }
        }).catch(() => {
          this.$Message.error({
            background: true,
            content: '获取文章失败！'
          })
        })
      },
      //获取全部分类
      allCategories() {
        allCategories().then(res => {
          if (res.code === 2000) {
            this.categoryList = res.data.categoriesList;
          }
        })
      },
      //获取分类中的全部文章
      listArticleByCategoryId(categoryId) {
        listArticleByCategoryId(categoryId).then(res => {
          if (res.code === 2000) {
            this.articleList = res.data.articleList;
          }
        })
      },
    },
    filters: {
      formatTime: function (date) {
        return moment(date).format("MMMM Do YYYY, h:mm:ss a");
      }
    }
  }
</script>

<style scoped>
  .category-article:hover {
    cursor: default;
  }
  #title {
    font-size: 25px;
    font-weight: bold;
    font-family: 'NSimSun',serif;

  }
  #info {
    font-size: 16px;
    font-family: 'FangSong',serif;
  }

  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
</style>
